<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    h3 {
      margin-top: 0;
      color: #333;
    }
    button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .status {
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      text-align: center;
    }
    .enabled {
      background-color: #d4edda;
      color: #155724;
    }
    .disabled {
      background-color: #f8d7da;
      color: #721c24;
    }
    .export-section {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    .export-section h4 {
      margin: 0 0 10px 0;
      color: #555;
    }
    .sync-section {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    .sync-section h4 {
      margin: 0 0 10px 0;
      color: #555;
    }
    .upload-section {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    .upload-section h4 {
      margin: 0 0 10px 0;
      color: #555;
    }
    .footer {
      margin-top: 20px;
      padding-top: 10px;
      border-top: 1px solid #eee;
      text-align: center;
      font-size: 12px;
      color: #888;
    }
    .version {
      font-weight: bold;
      color: #555;
    }
  </style>
</head>
<body>
  <h3>个人导航助手</h3>
  <div id="status" class="status disabled">数据收集已禁用</div>
  <button id="toggleCollect">启用数据收集</button>
  
  <!-- 同步功能区域 -->
  <div class="sync-section">
    <h4>数据同步</h4>
    <button id="syncHistory">同步浏览历史</button>
    <button id="syncBookmarks">同步书签</button>
  </div>
  
  <!-- 上传功能区域 -->
  <div class="upload-section">
    <h4>数据上传</h4>
    <button id="uploadBookmarks">上传书签到浏览器</button>
  </div>
  
  <!-- 导出功能区域 -->
  <div class="export-section">
    <h4>数据导出</h4>
    <button id="exportHistory">导出浏览历史</button>
    <button id="exportBookmarks">导出书签</button>
  </div>
  
  <!-- 版权和版本信息 -->
  <div class="footer">
    <div class="version">版本: 1.0.0</div>
    <div>© 2025 个人导航助手. 保留所有权利.</div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>